<template>
    <div class="white-page">
        <el-card shadow="never" class="card-com">
            <div class="card-1">
                <searchPanel @refresh="getData('reset')" @changePanel="resizeWin">
                    <!-- 查询面板 -->
                    <template v-slot:search>
                        <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
                            <el-row :gutter="20">
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="白名单值" style="width: 100%;">
                                        <el-input @keyup.enter.native="getData('search')" @clear="getData('search')"
                                            v-model="listSearch.condition.value" clearable placeholder="请输入白名单值" />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="原因">
                                        <el-input @keyup.enter.native="getData('search')" @clear="getData('search')"
                                            v-model="listSearch.condition.reason" clearable placeholder="请输入原因" />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="白名单类型">
                                        <el-select v-model="listSearch.condition.type" clearable
                                            @change="getData('search')" placeholder="请选择白名单类型">
                                            <el-option v-for="(item, index) in blackAndWhiteType" :label="item"
                                                :value="index"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>


                            </el-row>
                            <el-row justify="end">
                                <el-button type="primary" @click="getData('search')">查询</el-button>
                                <el-button @click="getData('reset')">重置</el-button>
                            </el-row>
                        </el-form>
                    </template>
                    <!-- 字段添加 -->
                    <template v-slot:edit>
                        <el-button :icon="Plus" v-permission="'WHITE_LIST:CREATE-EDIT'" type="primary"
                            @click="AddEdit('add')"></el-button>

                        <DropItem v-model:table-prop="tableProp"></DropItem>
                    </template>
                </searchPanel>
            </div>
            <div class="card-2">
                <OnlyTable ref="onlyTableRef" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
                    @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
                    :loading="pageParams.loadIng">
                    <template #type="scope">
                        {{ blackAndWhiteType[scope.row.type] }}
                    </template>
                    <template #handle="scope">

                        <el-button v-permission="'WHITE_LIST:CREATE-EDIT'" type="primary" size="small" link
                            @click="AddEdit('edit', scope.row)">编辑</el-button>
                        <el-button v-permission="'WHITE_LIST:DELETE'" type="danger" size="small" link
                            @click="delBtn(scope.row)">删除</el-button>
                        <el-button type="primary" size="small" link @click="detailBtn(scope.row)"
                            v-permission="'WHITE_LIST:DETAIL'">详情</el-button>
                    </template>
                </OnlyTable>
            </div>

        </el-card>
        <addCom ref="addAndEditRef" @refresh="getData('reset')" @search-edit="getData('search')"></addCom>
        <FormDetail ref="detailRef" :detailData="detailData" :labelWidth="140"></FormDetail>
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, onUnmounted, nextTick } from 'vue';
import { Search, Plus, Refresh, Download } from '@element-plus/icons-vue'
import _ from "lodash"
import { storeToRefs } from 'pinia';
import { detailListGet, deteleListDel } from "@/api/blackAndWhite"

import { whiteListStore } from './pageStore';
import { useEnumStore } from '@/store/enumeration';
const addCom = defineAsyncComponent(() => import('./components/addAndEdit.vue'))
const { detailData, tableProp, listSearch, pageParams, addAndEditRef, detailRef } = storeToRefs(whiteListStore())
const { AddEdit, getDate1, delBtn, handPage } = whiteListStore()
const { blackAndWhiteType } = storeToRefs(useEnumStore())
const onlyTableRef = ref()
onMounted(() => {
    getDate1('search')
    nextTick(() => {
        const dom1 = document.querySelector(".card-1") as any;
        const dom2 = document.querySelector(".card-com") as any;
        if (dom2) {
            const height = dom2.offsetHeight - dom1.offsetHeight - 70;
            pageParams.value.tableHeight = height;
        }
    })
    addEventListener('resize', resizeWin)
})
onUnmounted(() => {
    addEventListener("resize", resizeWin)
})
const resizeWin = _.debounce(() => {
    const dom1 = document.querySelector(".card-1") as any;
    const dom2 = document.querySelector(".card-com") as any;


    if (dom2) {
        const height = dom2.offsetHeight - dom1.offsetHeight - 70;
        pageParams.value.tableHeight = height;
    }
}, 200)
const getData = (type: string) => {
    if (type == 'reset') onlyTableRef.value.initPagination()
    getDate1(type)
    // resizeWin()
}
const detailBtn = async (row: any) => {
    try {
        const res = await detailListGet({ id: row.id })
        res.data.type = res.data.type + ''
        if (res.code != 20000) return
        detailData.value = detailData.value.map(item => {
            if (item.prop == "type") {
                return {
                    ...item,
                    value: blackAndWhiteType.value[res.data[item.prop]]

                }
            } else {
                return {
                    ...item,
                    value: res.data[item.prop]
                }
            }
        })
        detailRef.value.dialogBasic.height = 500
        detailRef.value?.show('edit')

    } catch (error) {

    }
}
</script>

<style scoped lang="scss">
.white-page {
    height: calc(100vh - 70px);

    .card-com {
        display: flex;
        flex-direction: column;
        // height: 100%;

        .card-2 {
            flex-grow: 1;
        }
    }
}
</style>